<template>
    <Modal :mask-closable="false"
            v-model="sendInfoVisible"
            :title="`${$t('preliminary.AcceptanceTestResult')}`"
            :fullscreen="true"
            :footer-hide="true"
            @on-visible-change="handleVisibleChange"
    >
        <Form ref="acceptanceAddForm" :model="formItem" :label-width="200">
            <div class="basic-info">
                <div class="basic-info-title">
                    <h2>{{$t('preliminary.Acceptanceequipment')}}</h2>
                    <Button type="primary" ghost shape="circle" icon="md-add" @click="addDeviceClick">添加设备</Button>
                </div>
                <div style="height: 300px;overflow-y: scroll">
                    <Row :gutter="16">
                        <Col :span="4" class="margin10" v-for="item in memberList" :key="item.id">
                            <div class="member">
                                <img src="../../../../assets/images/event/nextDel.jpg" class="icon-position" @click="handleDeviceDel(item.deviceMId)"/>
                                <div class="member-item"><span>出厂编号:</span><span>{{ item.factoryNo }}</span></div>
                                <div class="member-item"><span>设备名称:</span><span>{{ item.deviceName }}</span></div>
                            </div>
                        </Col>
                    </Row>
                </div>
            </div>
            <div class="basic-info">
                <div class="basic-info-title">
                    <h2>{{$t('preliminary.Acceptanceinfo')}}</h2>
                    <Button type="primary" ghost shape="circle" icon="md-add" @click="handleAddCheck">添加验收标准</Button>
                </div>
                <div class="basic-info-body">
                    <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee;">
                        <Col span="8">
                            <FormItem :label="`${$t('preliminary.PlannedAcceptanceTestDate')}:`">
                                <div class="basic-info-body-item">{{ formItem.yjyst }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem :label="`${$t('preliminary.ActualAcceptanceTestDate')}:`">
                                <div class="basic-info-body-item">{{ formItem.finalAcceptDate }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem :label="`${$t('preliminary.Technicalappendix')}:`">
                                <div class="basic-info-body-item">
                                </div>
                            </FormItem>
                        </Col>
                    </Row>
                </div>
                <Row>
                    <Col span="4" offset="20">
                        <div class="file-list" v-for="(item, index) in formItem.jsfjList" :key="index" >
                            <div class="item-src" @click="handlePreview(item)">{{ item.fileName }}</div>
                        </div>
                    </Col>
                </Row>
                <div class="tableContent">
                    <Table
                            :columns="columns"
                            :data="checkList"
                    >
                        <template slot-scope="{ row, index }" slot="checkTarget">
                            <Input :value="row.checkTarget" @on-change="handleTarget($event, index)"/>
                        </template>
                        <template slot-scope="{ row, index }" slot="checkContent">
                            <Input :value="row.checkContent" @on-change="handleContent($event, index)"/>
                        </template>
                        <template slot-scope="{ row, index }" slot="checkResult">
                            <RadioGroup v-model="row.checkResult" @on-change="handleResult($event, index)">
                                <Radio v-for="item in types" :key="item.id" :label="item.id">{{ item.value }}</Radio>
                            </RadioGroup>
                        </template>
                        <template slot-scope="{ row, index }" slot="checkDesc">
                            <Input :value="row.checkDesc" @on-change="handleDesc($event, index)"/>
                        </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <span class="operationBtn" @click="handleDelete(index)">{{$t('common.Delete')}}</span>
                        </template>
                    </Table>
                </div>
            </div>
<!--            <div class="basic-info">-->
<!--                <div class="basic-info-title">-->
<!--                    <h2>验收结果</h2>-->
<!--                </div>-->
<!--                <div class="basic-info-body">-->
<!--                    <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">-->
<!--                        <Col span="8">-->
<!--                            <FormItem label="随机工具/备件">-->
<!--                                <div class="basic-info-body-item">-->
<!--                                    <RadioGroup v-model="sjFlag">-->
<!--                                        <Radio v-for="equ in packages" :key="equ.id" :label="equ.id">{{ equ.value }}</Radio>-->
<!--                                    </RadioGroup>-->
<!--                                </div>-->
<!--                            </FormItem>-->
<!--                        </Col>-->
<!--                        <Col span="8">-->
<!--                            <FormItem label="技术资料">-->
<!--                                <div class="basic-info-body-item">-->
<!--                                    <RadioGroup v-model="finallyFlag">-->
<!--                                        <Radio v-for="equ in packages" :key="equ.id" :label="equ.id">{{ equ.value }}</Radio>-->
<!--                                    </RadioGroup>-->
<!--                                </div>-->
<!--                            </FormItem>-->
<!--                        </Col>-->
<!--                        <Col span="8">-->
<!--                            <FormItem label="厂家培训">-->
<!--                                <div class="basic-info-body-item">-->
<!--                                    <RadioGroup v-model="cjFlag">-->
<!--                                        <Radio v-for="equ in tranings" :key="equ.id" :label="equ.id">{{ equ.value }}</Radio>-->
<!--                                    </RadioGroup>-->
<!--                                </div>-->
<!--                            </FormItem>-->
<!--                        </Col>-->
<!--                    </Row>-->
<!--                </div>-->
<!--                <Row>-->
<!--                    <Col span="4" offset="4">-->
<!--                        <div class="file-list" v-for="(item, index) in formItem.sjfjFile" :key="index" >-->
<!--                            <div class="item-src" @click="handlePreview(item)">{{ item.fileName }}</div>-->
<!--                        </div>-->
<!--                    </Col>-->
<!--                    <Col span="4" offset="4">-->
<!--                        <div class="file-list" v-for="(item, index) in formItem.zxjszlFile" :key="index" >-->
<!--                            <div class="item-src" @click="handlePreview(item)">{{ item.fileName }}</div>-->
<!--                        </div>-->
<!--                    </Col>-->
<!--                    <Col span="4" offset="4">-->
<!--                        <div class="file-list" v-for="(item, index) in formItem.cjpxFile" :key="index" >-->
<!--                            <div class="item-src" @click="handlePreview(item)">{{ item.fileName }}</div>-->
<!--                        </div>-->
<!--                    </Col>-->
<!--                </Row>-->
<!--            </div>-->
<!--            <div class="basic-info">-->
<!--                <div class="basic-info-title">-->
<!--                    <h2>A系列精度检测结果</h2>-->
<!--                </div>-->
<!--                <div class="basic-info-body">-->
<!--                    <Row>-->
<!--                        <Col span="8" style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">-->
<!--                            <FormItem label="检测精度">-->
<!--                                <div class="basic-info-body-item">-->
<!--                                    <RadioGroup v-model="aFlag">-->
<!--                                        <Radio v-for="equ in checks" :key="equ.id" :label="equ.id">{{ equ.value }}</Radio>-->
<!--                                    </RadioGroup>-->
<!--                                </div>-->
<!--                            </FormItem>-->
<!--                        </Col>-->
<!--                        &lt;!&ndash;                        <Col span="8">&ndash;&gt;-->
<!--                        &lt;!&ndash;                            <FormItem label="检测时间">&ndash;&gt;-->
<!--                        &lt;!&ndash;                                <div class="basic-info-body-item">&ndash;&gt;-->

<!--                        &lt;!&ndash;                                </div>&ndash;&gt;-->
<!--                        &lt;!&ndash;                            </FormItem>&ndash;&gt;-->
<!--                        &lt;!&ndash;                        </Col>&ndash;&gt;-->
<!--                        &lt;!&ndash;                        <Col span="8">&ndash;&gt;-->
<!--                        &lt;!&ndash;                            <FormItem label="检测人" required>&ndash;&gt;-->
<!--                        &lt;!&ndash;                                <div class="basic-info-body-item">&ndash;&gt;-->

<!--                        &lt;!&ndash;                                </div>&ndash;&gt;-->
<!--                        &lt;!&ndash;                            </FormItem>&ndash;&gt;-->
<!--                        &lt;!&ndash;                        </Col>&ndash;&gt;-->
<!--                    </Row>-->
<!--                </div>-->
<!--                <Row>-->
<!--                    <Col span="4" offset="4">-->
<!--                        <div class="file-list" v-for="(item, index) in formItem.ajdFile" :key="index" >-->
<!--                            <div class="item-src" @click="handlePreview(item)">{{ item.fileName }}</div>-->
<!--                        </div>-->
<!--                    </Col>-->
<!--                    &lt;!&ndash;                    <Col span="4" offset="4">&ndash;&gt;-->
<!--                    &lt;!&ndash;                        <div class="file-list" v-for="(item, index) in formItem.zxjszlFile" :key="index" >&ndash;&gt;-->
<!--                    &lt;!&ndash;                            <div class="item-src" @click="handlePreview(item)">{{ item.fileName }}</div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                        </div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    </Col>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    <Col span="4" offset="4">&ndash;&gt;-->
<!--                    &lt;!&ndash;                        <div class="file-list" v-for="(item, index) in formItem.cjpxFile" :key="index" >&ndash;&gt;-->
<!--                    &lt;!&ndash;                            <div class="item-src" @click="handlePreview(item)">{{ item.fileName }}</div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                        </div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    </Col>&ndash;&gt;-->
<!--                </Row>-->
<!--            </div>-->
<!--            <div class="basic-info">-->
<!--                <div class="basic-info-title">-->
<!--                    <h2>G系列精度检测结果</h2>-->
<!--                </div>-->
<!--                <div class="basic-info-body">-->
<!--                    <Row>-->
<!--                        <Col span="8" style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">-->
<!--                            <FormItem label="检测精度">-->
<!--                                <div class="basic-info-body-item">-->
<!--                                    <RadioGroup v-model="gFlag">-->
<!--                                        <Radio v-for="equ in checks" :key="equ.id" :label="equ.id">{{ equ.value }}</Radio>-->
<!--                                    </RadioGroup>-->
<!--                                </div>-->
<!--                            </FormItem>-->
<!--                        </Col>-->
<!--                        &lt;!&ndash;                        <Col span="8">&ndash;&gt;-->
<!--                        &lt;!&ndash;                            <FormItem label="检测时间">&ndash;&gt;-->
<!--                        &lt;!&ndash;                                <div class="basic-info-body-item">&ndash;&gt;-->

<!--                        &lt;!&ndash;                                </div>&ndash;&gt;-->
<!--                        &lt;!&ndash;                            </FormItem>&ndash;&gt;-->
<!--                        &lt;!&ndash;                        </Col>&ndash;&gt;-->
<!--                        &lt;!&ndash;                        <Col span="8">&ndash;&gt;-->
<!--                        &lt;!&ndash;                            <FormItem label="检测人">&ndash;&gt;-->
<!--                        &lt;!&ndash;                                <div class="basic-info-body-item">&ndash;&gt;-->

<!--                        &lt;!&ndash;                                </div>&ndash;&gt;-->
<!--                        &lt;!&ndash;                            </FormItem>&ndash;&gt;-->
<!--                        &lt;!&ndash;                        </Col>&ndash;&gt;-->
<!--                    </Row>-->
<!--                </div>-->
<!--                <Row>-->
<!--                    <Col span="4" offset="4">-->
<!--                        <div class="file-list" v-for="(item, index) in formItem.gjdFile" :key="index" >-->
<!--                            <div class="item-src" @click="handlePreview(item)">{{ item.fileName }}</div>-->
<!--                        </div>-->
<!--                    </Col>-->
<!--                    &lt;!&ndash;                    <Col span="4" offset="4">&ndash;&gt;-->
<!--                    &lt;!&ndash;                        <div class="file-list" v-for="(item, index) in formItem.zxjszlFile" :key="index" >&ndash;&gt;-->
<!--                    &lt;!&ndash;                            <div class="item-src" @click="handlePreview(item)">{{ item.fileName }}</div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                        </div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    </Col>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    <Col span="4" offset="4">&ndash;&gt;-->
<!--                    &lt;!&ndash;                        <div class="file-list" v-for="(item, index) in formItem.cjpxFile" :key="index" >&ndash;&gt;-->
<!--                    &lt;!&ndash;                            <div class="item-src" @click="handlePreview(item)">{{ item.fileName }}</div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                        </div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    </Col>&ndash;&gt;-->
<!--                </Row>-->
<!--            </div>-->
<!--            <div class="basic-info">-->
<!--                <div class="basic-info-title">-->
<!--                    <h2>验收人员</h2>-->
<!--                </div>-->
<!--                <div class="basic-info-body">-->
<!--                    <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">-->
<!--                        <Col span="8">-->
<!--                            <FormItem label="设备管理员">-->
<!--                                <div class="basic-info-body-item">{{ formItem.belongCompanyAdminName }}</div>-->
<!--                            </FormItem>-->
<!--                        </Col>-->
<!--                        <Col span="8">-->
<!--                            <FormItem label="所属部门验收人员">-->
<!--                                <div class="basic-info-body-item">{{ formItem.belongDeptAdminName }}</div>-->
<!--                            </FormItem>-->
<!--                        </Col>-->
<!--                        <Col span="8">-->
<!--                            <FormItem label="厂务中心验收人员">-->
<!--                                <div class="basic-info-body-item">{{ formItem.factoryAdminName }}</div>-->
<!--                            </FormItem>-->
<!--                        </Col>-->
<!--                    </Row>-->
<!--                    <Row>-->
<!--                        <Col span="8" style="border-bottom: 1px solid #eee">-->
<!--                            <FormItem label="采购员">-->
<!--                                <div class="basic-info-body-item">{{ formItem.buyer }}</div>-->
<!--                            </FormItem>-->
<!--                        </Col>-->
<!--                    </Row>-->
<!--                </div>-->
<!--            </div>-->
        </Form>
        <div class="btn-wrapper">
            <Row :gutter="16" class="btn-action">
                <Col span="12" offset="7">
                    <Button style="margin-right: 10px;" type="primary" @click="handleSave">{{$t('common.Save')}}</Button>
<!--                    <Button style="margin-right: 10px;" type="primary" ghost @click="exportCheck">下载验收文件</Button>-->
<!--                    <Button style="margin-right: 10px;" type="primary" ghost @click="exportAorG('A')">下载A系列精度检测文件</Button>-->
<!--                    <Button style="margin-right: 10px;" type="primary" ghost @click="exportAorG('G')">下载G系列精度检测文件</Button>-->
                </Col>
            </Row>
        </div>
        <!--添加设备-->
        <choose-device-modal ref="chooseDeviceModal" @handleMulDevice="handleMulDevice"/>
    </Modal>
</template>

<script>
    import ChooseDeviceModal from "./chooseDeviceModal";
    export default {
        name: "batchFinalCheckModal",
        components: {ChooseDeviceModal},
        data() {
            return {
                sjFlag: '',
                finallyFlag: '',
                cjFlag: '',
                aFlag: '',
                gFlag: '',
                sendInfoVisible: false,
                loadingVisible: false,
                formItem: {},
                memberList: [],
                checkList: [],
                packages: [{id: 1, value: '已到齐'},{id: 0, value: '未到齐'}],
                tranings: [{id: 1, value: '已培训'},{id: 0, value: '未培训'}],
                checks: [{id: 1, value: '已检测'},{id: 0, value: '未检测'}],
                types: [{id: 1, value: '不合格'},{id: 2, value: '合格'}],
                columns: [
                    {
                      title: `${ this.$t('preliminary.AcceptanceTestIndex') }`,
                        key: 'checkTarget',
                        align: 'center',
                        slot: 'checkTarget',
                        // minWidth: 120
                        renderHeader: (h) => {
                            return h('div',[
                                h('span',{
                                    style: {
                                        color: '#ff0000',
                                    },
                                    domProps: {
                                        innerHTML: '*'
                                    }
                                }),
                                h('span',{
                                    domProps: {
                                        innerHTML: '验收指标'
                                    }
                                })
                            ])
                        }
                    },
                    {
                      title: `${ this.$t('preliminary.AcceptanceTestContent') }`,
                        key: 'checkContent',
                        align: 'center',
                        slot: 'checkContent',
                        // minWidth: 120,
                        renderHeader: (h) => {
                            return h('div',[
                                h('span',{
                                    style: {
                                        color: '#ff0000',
                                    },
                                    domProps: {
                                        innerHTML: '*'
                                    }
                                }),
                                h('span',{
                                    domProps: {
                                        innerHTML: '验收内容'
                                    }
                                })
                            ])
                        }
                    },

                    {
                      title: `${ this.$t('preliminary.AcceptanceTestResult') }`,
                        key: 'checkResult',
                        align: 'center',
                        slot: 'checkResult',
                        // minWidth: 120
                        renderHeader: (h) => {
                            return h('div',[
                                h('span',{
                                    style: {
                                        color: '#ff0000',
                                    },
                                    domProps: {
                                        innerHTML: '*'
                                    }
                                }),
                                h('span',{
                                    domProps: {
                                        innerHTML: '验收结果'
                                    }
                                })
                            ])
                        }
                    },
                    {
                      title: `${ this.$t('preliminary.NonConformingReason') }`,
                        key: 'checkDesc',
                        align: 'center',
                        slot: 'checkDesc',
                        // minWidth: 120
                    },
                    {
                        title: `${ this.$t('common.operation') }`,
                        key: 'action',
                        align: 'center',
                        slot: 'action'
                    }
                ],
                data: []
            }
        },
        methods: {
            show(record) {
                this.sendInfoVisible = true
                this.formItem = {}
                this.checkList = []
                this.memberList = []
                // this.getDetail(record)
            },
            getDetail(record) {
                this.axios({
                    method: 'post',
                    url: '/dms/dmsCheck/get',
                    params: {
                        deviceMId: record.deviceMId
                    }
                }).then(res => {
                    
                    if (res.code == 200) {
                        this.$nextTick(() => {
                            this.formItem = res.data
                            this.sjFlag = this.formItem.sjfjFile.length ? 1 : 0
                            this.finallyFlag = this.formItem.zxjszlFile.length ? 1 : 0
                            this.cjFlag = this.formItem.cjpxFile.length ? 1 : 0
                            this.aFlag = this.formItem.ajdFile.length ? 1 : 0
                            this.gFlag = this.formItem.gjdFile.length ? 1 : 0
                        })
                    }
                })
            },
            getInfo(obj) {
                this.axios({
                    method: 'post',
                    url: '/dms/dmsCheck/getByOrderno',
                    params: {
                        orderNo : obj.orderNo,
                        specification: obj.specification
                    }
                }).then(res => {
                    
                    if (res.code == 200) {
                        this.$nextTick(() => {
                            this.formItem = res.data
                        })
                    }
                })
            },
            //文件预览
            handlePreview(item) {
                if (item) {
                    window.open(this.util.filePathToUrl(item.filePath))
                }
            },
            //添加验收标准
            handleAddCheck() {
                this.checkList.push({})
            },
            //验收指标
            handleTarget(e, index) {
                this.checkList[index].checkTarget = e.target.value
            },
            handleContent(e, index) {
                this.checkList[index].checkContent = e.target.value
            },
            handleResult(e, index) {
                console.log(e)
                this.checkList[index].checkResult = e
            },
            handleDesc(e, index) {
                this.checkList[index].checkDesc = e.target.value
            },
            //删除
            handleDelete(id) {
                this.checkList = this.checkList.filter((item, index) => id != index)
            },
            //多个设备
            addDeviceClick() {
                this.$refs.chooseDeviceModal.show()
            },
            handleMulDevice(data, obj) {
                console.log(data)
                if (this.memberList.length) {
                    let arr = [...this.memberList].filter(x => [...data].some(y => y.deviceMId === x.deviceMId))
                    if (arr.length) {
                        this.$Message.warning(({content: '有重复数据，请重新选择！', duration: 6, closable: true}));
                        return false
                    }
                    this.memberList = [...this.memberList, ...data]
                }else {
                    this.memberList = [...this.memberList, ...data]
                }
                this.getInfo(obj)

            },
            //设备删除
            handleDeviceDel(deviceMId) {
                this.memberList = this.memberList.filter(item => item.deviceMId != deviceMId)
            },
            //保存
            handleSave() {
                let flag = false
                this.checkList.forEach(item => {
                    if (item.checkTarget && item.checkContent && item.checkResult) {
                        flag = true
                    }
                })
                if (!this.memberList.length) {
                    this.$Message.warning(({content: '请添加设备！',duration:6,closable:true}));
                    return false
                }
                if (!this.checkList.length || !flag) {
                    this.$Message.warning(({content: '请添加验收信息并将信息填写完整！',duration:6,closable:true}));
                    return false
                }
                this.loadingVisible = true
                let dmsCheckList = this.checkList.map( item => {
                    return {
                        checkTarget: item.checkTarget,
                        checkContent: item.checkContent,
                        checkResult: item.checkResult,
                        checkDesc: item.checkDesc ? item.checkDesc : ''
                    }
                })
                let deviceMIdList = []
                this.memberList.map(item => {
                    deviceMIdList.push(item.deviceMId)
                })
                let params = {
                    deviceMIdList,
                    dmsCheckList
                }
                this.axios({
                    method: 'post',
                    url: '/dms/dmsCheck/addAll',
                    data: params
                }).then(res => {
                    if(res.code === 200){
                        this.$emit('handleFresh')
                        this.sendInfoVisible = false
                        this.$Message.success(({content:'批量验收成功！',duration:3,closable:true}));
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                }).finally(() => {
                    this.loadingVisible = false
                })
            },
            handleVisibleChange() {}
        }
    }
</script>

<style scoped lang="scss">
    .basic-info {
        .basic-info-title {
            span {
                display: inline-block;
                width: 7px;
                height: 24px;
                background: #187bdb;
            }
            h2 {
                display: inline-block;
                font-size: 16px;
                padding-left: 10px;
                position: relative;
                &::before {
                    content:"";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 7px;
                    height: 24px;
                    background: #187bdb;
                }
            }
        }
        .basic-info-body {
            margin: 10px;
            color: #333;
            font-size: 13px;
            font-family: 'Arial Normal', 'Arial', sans-serif;
            font-weight: 400;
            border-left: 1px solid #eee;
            .basic-info-body-label {
                display: inline-block;
                width: 40%;
                height: 48px;
                line-height: 48px;
                background: #f5f6f7;
                text-align: right;
                padding-right: 10px;
                /*border-left: 1px solid #B6B7B7;*/
                /*border-top: 1px solid #B6B7B7;*/
                /*border-bottom: 1px solid #B6B7B7;*/
            }
            .basic-info-body-item {
                /*display: inline-block;*/
                /*width: 60%;*/
                /*height: 48px;*/
                /*line-height: 48px;*/
                /*text-align: left;*/
                padding: 0 10px;
                /*border-left: 1px solid #eee;*/
                /*border-right: 1px solid #eee;*/
                /*border-right: 1px solid #B6B7B7;*/
                /*border-top: 1px solid #B6B7B7;*/
                /*border-bottom: 1px solid #B6B7B7;*/
            }
        }
    }
    .preview {
        position: absolute;
        right:10px;
        top:0;
        width: 35px;
        height: 35px;
        background: #eee;
        .preview-img {
            width: 35px;
            height: 35px;
            overflow: hidden;
        }
    }
    /deep/.ivu-form-item-label {
        /*display: inline-block;*/
        /*width: 40%;*/
        /*height: 48px;*/
        /*line-height: 48px;*/
        background: #f5f6f7;
        text-align: right;
        border-right: 1px solid #eee;
        /*padding-right: 10px;*/
    }
    /deep/.ivu-form-item {
        margin-bottom: 0;
        border-right: 1px solid #eee;
    }
    /deep/.Input-wrapper {
        width: 90%;
        margin: 0 10px;
        .ivu-select-selection {
            height: 30px;
            border: none;
            box-shadow: none;
        }
        .ivu-input {
            border: none;
            box-shadow: none;
        }
    }
    .btn-wrapper {
        position: relative;
        .btn-action {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 100px;
        }
    }
    .upload-wrapper {
        display: inline-block;
        position: relative;
        span {
            display: inline-block;
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: -8px;
            line-height: 26px;
        }
        .upload-action {
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            top: -1px;
            bottom: 0px;
            background: rgba(0,0,0,.6);
            i {
                cursor: pointer;
                margin: 0 10px;
            }
        }
        &:hover {
            .upload-action {
                display: inline-block;
            }
        }
    }
    /deep/.ivu-upload {
        margin-bottom: -12px;
        display: inline-block;
    }
    .over-wrapper {
        width: 200px;
        height: 23px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /deep/.ivu-select-selected-value {
        background: #ffffff;
        color: #333333;
    }
    /deep/.ivu-input-disabled {
        background: #ffffff;
        color: #333333;
    }
    /deep/.ivu-select-placeholder {
        background: #ffffff;
        color: #333333;
    }
    /deep/.ivu-select-input {
        background: #fff;
        height:30px;
    }

    .member {
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(221, 221, 221, 1);
        border-radius: 3px;
        box-shadow: 3px 2px 5px rgba(0, 0, 0, .1);
        position: relative;
        .icon-position {
            position: absolute;
            right: -10px;
            top: -10px;
            width: 24px;
            height: 24px;
        }
        .member-item {
            line-height: 30px;
            font-size: 14px;
            margin-top: 16px;
            span {
                &:nth-child(1) {
                    display: inline-block;
                    width: 40%;
                    text-align: right;
                    color: #999;
                }
                &:nth-child(2) {
                    display: inline-block;
                    width: 60%;
                    text-align: center;
                    font-family: 'Helvetica', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 12px;
                    color: #333;
                    /*color: #000*/
                }
            }
        }
    }
    /deep/.bgBlue {
        background-color: #e6f7ff;
        color: #1890ff;
    }
    .margin10 {
        margin: 10px 0;
    }

    .file-list {
        width: 100%;
        margin: 0 20px;
        .item-src {
            width: 80%;
            display: inline-block;
            line-height: 26px;
            color: #187bdb;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .item-icon {
            width: 20%;
            display: inline-block;
            margin-top: 4px;
        }
    }

</style>
